<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>有奖竞答 - 筛选查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #FF5A5F;
            --secondary: #7B61FF;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --text-primary: #1D2129;
            --text-secondary: #4E5969;
            --text-tertiary: #86909C;
            --bg-light: #F7F8FA;
            --bg-white: #FFFFFF;
            --border-light: #E5E6EB;
            --radius: 12px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        /* 搜索和筛选区 */
        .search-filter-container {
            background-color: var(--bg-white);
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-box {
            position: relative;
            margin-bottom: 12px;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }
        
        /* 筛选按钮组 */
        .filter-tabs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            padding: 6px 12px;
            white-space: nowrap;
            font-size: 13px;
            background-color: var(--bg-light);
            border: 1px solid var(--border-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        
        .filter-tab.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 高级筛选面板 */
        .advanced-filter {
            background-color: var(--bg-white);
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            display: none;
        }
        
        .advanced-filter.show {
            display: block;
        }
        
        .filter-section {
            margin-bottom: 16px;
        }
        
        .filter-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            padding: 6px 12px;
            font-size: 13px;
            border-radius: 16px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            white-space: nowrap;
        }
        
        .filter-option.active {
            border-color: var(--primary);
            color: var(--primary);
            background-color: rgba(255, 90, 95, 0.1);
        }
        
        .filter-actions {
            display: flex;
            gap: 12px;
            margin-top: 12px;
        }
        
        .filter-btn {
            flex: 1;
            padding: 8px 0;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid var(--border-light);
        }
        
        .reset-btn {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .confirm-btn {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 筛选结果标签 */
        .filter-tags {
            padding: 8px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        
        .filter-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background-color: rgba(123, 97, 255, 0.1);
            color: var(--secondary);
            border-radius: 16px;
            font-size: 12px;
        }
        
        .remove-tag {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(123, 97, 255, 0.2);
            color: var(--secondary);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }
        
        .clear-all {
            color: var(--text-tertiary);
            font-size: 12px;
            background: none;
            border: none;
            margin-left: auto;
        }
        
        /* 分类标签 */
        .category-tabs {
            display: flex;
            background-color: var(--bg-white);
            padding: 8px 16px;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid var(--border-light);
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: 6px 16px;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-radius: 16px;
            margin-right: 8px;
            flex-shrink: 0;
        }
        
        .category-tab.active {
            color: var(--primary);
            background-color: rgba(255, 90, 95, 0.1);
        }
        
        /* 竞答列表容器 */
        .quiz-container {
            padding: 12px 16px;
        }
        
        /* 竞答卡片通用样式 */
        .quiz-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 16px;
            overflow: hidden;
            transition: transform 0.2s ease;
        }
        
        .quiz-card:hover {
            transform: translateY(-2px);
        }
        
        /* 竞答头部 */
        .quiz-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .quiz-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid var(--border-light);
        }
        
        .quiz-creator {
            flex: 1;
        }
        
        .creator-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .quiz-time {
            font-size: 11px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .quiz-status {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .status-active {
            background-color: rgba(0, 180, 42, 0.1);
            color: var(--success);
        }
        
        .status-ending {
            background-color: rgba(255, 125, 0, 0.1);
            color: var(--warning);
        }
        
        .status-ended {
            background-color: rgba(134, 144, 156, 0.1);
            color: var(--text-tertiary);
        }
        
        /* 竞答内容 */
        .quiz-content {
            padding: 16px;
        }
        
        .quiz-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        /* 无图竞答 */
        .quiz-no-image .quiz-content {
            padding-bottom: 16px;
        }
        
        /* 单图竞答 */
        .quiz-single-image .quiz-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .quiz-single-image .quiz-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图竞答布局 */
        .quiz-multi-image.two-images .quiz-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .quiz-multi-image.three-images .quiz-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .quiz-multi-image.three-images .quiz-images div:nth-child(3) {
            grid-column: 1 / 3;
        }
        
        .quiz-multi-image .quiz-image {
            aspect-ratio: 1/1;
            overflow: hidden;
            position: relative;
        }
        
        .quiz-multi-image .quiz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 奖励信息 */
        .quiz-reward {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding: 8px 12px;
            background-color: rgba(123, 97, 255, 0.05);
            border-radius: 8px;
            border-left: 3px solid var(--secondary);
        }
        
        .reward-icon {
            color: var(--secondary);
            font-size: 18px;
        }
        
        .reward-text {
            font-size: 14px;
            font-weight: 500;
            color: var(--secondary);
        }
        
        /* 问题摘要 */
        .quiz-summary {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        /* 参与情况 */
        .quiz-stats {
            display: flex;
            justify-content: space-between;
            padding: 12px 16px;
            border-top: 1px solid var(--border-light);
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .quiz-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 参与按钮 */
        .quiz-action {
            padding: 12px 16px;
            border-top: 1px solid var(--border-light);
        }
        
        .join-btn {
            width: 100%;
            padding: 10px 0;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .join-btn.ended {
            background-color: var(--bg-light);
            color: var(--text-tertiary);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 创建竞答按钮 */
        .fab-create {
            position: fixed;
            right: 24px;
            bottom: 86px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
            border: none;
            font-size: 24px;
            z-index: 999;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 倒计时样式 */
        .countdown {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--warning);
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 40px 20px;
            text-align: center;
            display: none;
        }
        
        .empty-state.show {
            display: block;
        }
        
        .empty-icon {
            font-size: 60px;
            color: var(--text-tertiary);
            margin-bottom: 16px;
        }
        
        .empty-text {
            font-size: 16px;
            color: var(--text-tertiary);
            margin-bottom: 24px;
        }
        
        .empty-btn {
            padding: 8px 24px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">有奖竞答</div>
        <button class="nav-btn" id="notificationBtn">
            <i class="far fa-bell"></i>
        </button>
    </div>
    
    <!-- 搜索和筛选区 -->
    <div class="search-filter-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索竞答题目或奖励...">
        </div>
        
        <div class="filter-tabs">
            <button class="filter-tab active" id="allFilter">
                <i class="fas fa-th"></i>
                <span>全部</span>
            </button>
            <button class="filter-tab" id="rewardFilter">
                <i class="fas fa-gift"></i>
                <span>奖励类型</span>
            </button>
            <button class="filter-tab" id="statusFilter">
                <i class="fas fa-hourglass-half"></i>
                <span>状态</span>
            </button>
            <button class="filter-tab" id="timeFilter">
                <i class="fas fa-clock"></i>
                <span>发布时间</span>
            </button>
            <button class="filter-tab" id="advancedFilterBtn">
                <i class="fas fa-sliders-h"></i>
                <span>高级筛选</span>
            </button>
        </div>
    </div>
    
    <!-- 高级筛选面板 -->
    <div class="advanced-filter" id="advancedFilterPanel">
        <div class="filter-section">
            <div class="filter-title">
                <i class="fas fa-image"></i>
                <span>内容类型</span>
            </div>
            <div class="filter-options">
                <button class="filter-option active">全部类型</button>
                <button class="filter-option">无图竞答</button>
                <button class="filter-option">单图竞答</button>
                <button class="filter-option">多图竞答</button>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-title">
                <i class="fas fa-question-circle"></i>
                <span>题目数量</span>
            </div>
            <div class="filter-options">
                <button class="filter-option active">不限</button>
                <button class="filter-option">1-5题</button>
                <button class="filter-option">6-20题</button>
                <button class="filter-option">20题以上</button>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-title">
                <i class="fas fa-users"></i>
                <span>参与人数</span>
            </div>
            <div class="filter-options">
                <button class="filter-option active">不限</button>
                <button class="filter-option">100人以下</button>
                <button class="filter-option">100-1000人</button>
                <button class="filter-option">1000人以上</button>
            </div>
        </div>
        
        <div class="filter-actions">
            <button class="filter-btn reset-btn" id="resetFilterBtn">重置</button>
            <button class="filter-btn confirm-btn" id="confirmFilterBtn">确认筛选</button>
        </div>
    </div>
    
    <!-- 筛选结果标签 -->
    <div class="filter-tags" id="filterTags">
        <div class="filter-tag">
            <span>现金奖励</span>
            <button class="remove-tag"><i class="fas fa-times"></i></button>
        </div>
        <div class="filter-tag">
            <span>进行中</span>
            <button class="remove-tag"><i class="fas fa-times"></i></button>
        </div>
        <button class="clear-all">清除全部</button>
    </div>
    
    <!-- 分类标签 -->
    <div class="category-tabs">
        <button class="category-tab active">全部竞答</button>
        <button class="category-tab">知识竞赛</button>
        <button class="category-tab">趣味问答</button>
        <button class="category-tab">生活常识</button>
        <button class="category-tab">专业技能</button>
        <button class="category-tab">娱乐明星</button>
    </div>
    
    <!-- 竞答列表容器 -->
    <div class="quiz-container" id="quizContainer">
        <!-- 无图竞答 -->
        <div class="quiz-card quiz-no-image" data-type="text" data-reward="cash" data-status="active">
            <div class="quiz-header">
                <img src="https://picsum.photos/id/64/100/100" alt="创建者头像" class="quiz-avatar">
                <div class="quiz-creator">
                    <div class="creator-name">知识问答平台</div>
                    <div class="quiz-time">
                        <i class="fas fa-clock"></i>
                        <span>发布于 今天 09:30</span>
                    </div>
                </div>
                <span class="quiz-status status-active">进行中</span>
            </div>
            
            <div class="quiz-content">
                <div class="quiz-title">
                    中国传统文化知识竞赛，挑战你的国学功底！
                </div>
                
                <div class="quiz-reward">
                    <i class="fas fa-money-bill-wave reward-icon"></i>
                    <span class="reward-text">奖金池 ¥5,000 元，优胜者平分</span>
                </div>
                
                <div class="quiz-summary">
                    本次竞答包含50道关于中国传统文化的题目，涵盖诗词、历史、哲学等多个领域。得分最高的前10名参与者将平分奖金池，快来挑战吧！
                </div>
                
                <div class="countdown">
                    <i class="fas fa-hourglass-half"></i>
                    <span>剩余时间: 2天8小时</span>
                </div>
            </div>
            
            <div class="quiz-stats">
                <div class="quiz-stat">
                    <i class="far fa-user"></i>
                    <span>已有 2,356 人参与</span>
                </div>
                <div class="quiz-stat">
                    <i class="far fa-question-circle"></i>
                    <span>50 道题目</span>
                </div>
                <div class="quiz-stat">
                    <i class="far fa-clock"></i>
                    <span>30分钟 限时</span>
                </div>
            </div>
            
            <div class="quiz-action">
                <button class="join-btn">
                    <i class="fas fa-play"></i>
                    <span>立即参与</span>
                </button>
            </div>
        </div>
        
        <!-- 单图竞答 -->
        <div class="quiz-card quiz-single-image" data-type="image" data-reward="gift" data-status="ending">
            <div class="quiz-header">
                <img src="https://picsum.photos/id/22/100/100" alt="创建者头像" class="quiz-avatar">
                <div class="quiz-creator">
                    <div class="creator-name">摄影爱好者社区</div>
                    <div class="quiz-time">
                        <i class="fas fa-clock"></i>
                        <span>发布于 昨天 15:45</span>
                    </div>
                </div>
                <span class="quiz-status status-ending">即将结束</span>
            </div>
            
            <div class="quiz-content">
                <div class="quiz-title">
                    这张照片拍摄于哪个国家的哪个景点？答对赢取摄影器材！
                </div>
                
                <div class="quiz-image">
                    <img src="https://picsum.photos/id/1036/800/500" alt="竞答图片">
                </div>
                
                <div class="quiz-reward">
                    <i class="fas fa-gift reward-icon"></i>
                    <span class="reward-text">奖励 专业摄影背包 1个</span>
                </div>
                
                <div class="quiz-summary">
                    观察图片中的建筑风格和自然景观，回答这张照片的拍摄地点。最先答对的3名参与者将获得专业摄影背包一个，答案最详细的参与者还将获得额外惊喜！
                </div>
                
                <div class="countdown">
                    <i class="fas fa-hourglass-half"></i>
                    <span>剩余时间: 3小时45分</span>
                </div>
            </div>
            
            <div class="quiz-stats">
                <div class="quiz-stat">
                    <i class="far fa-user"></i>
                    <span>已有 876 人参与</span>
                </div>
                <div class="quiz-stat">
                    <i class="far fa-question-circle"></i>
                    <span>1 道题目</span>
                </div>
                <div class="quiz-stat">
                    <i class="far fa-comment"></i>
                    <span>328 条讨论</span>
                </div>
            </div>
            
            <div class="quiz-action">
                <button class="join-btn">
                    <i class="fas fa-pencil-alt"></i>
                    <span>提交答案</span>
                </button>
            </div>
        </div>
        
        <!-- 多图竞答（2张） -->
        <div class="quiz-card quiz-multi-image two-images" data-type="image" data-reward="points" data-status="active">
            <div class="quiz-header">
                <img src="https://picsum.photos/id/91/100/100" alt="创建者头像" class="quiz-avatar">
                <div class="quiz-creator">
                    <div class="creator-name">美食探索家</div>
                    <div class="quiz-time">
                        <i class="fas fa-clock"></i>
                        <span>发布于 3天前</span>
                    </div>
                </div>
                <span class="quiz-status status-active">进行中</span>
            </div>
            
            <div class="quiz-content">
                <div class="quiz-title">
                    这两道菜肴分别属于哪个菜系？答对获得积分奖励！
                </div>
                
                <div class="quiz-images">
                    <div class="quiz-image">
                        <img src="https://picsum.photos/id/292/600/600" alt="竞答图片1">
                    </div>
                    <div class="quiz-image">
                        <img src="https://picsum.photos/id/431/600/600" alt="竞答图片2">
                    </div>
                </div>
                
                <div class="quiz-reward">
                    <i class="fas fa-star reward-icon"></i>
                    <span class="reward-text">奖励 500-2000 积分，可兑换美食券</span>
                </div>
                
                <div class="quiz-summary">
                    图中展示了两道经典中国菜肴，请分别说出它们所属的菜系。完全答对者将获得2000积分，答对一道获得500积分。积分可兑换各大餐厅美食券！
                </div>
                
                <div class="countdown">
                    <i class="fas fa-hourglass-half"></i>
                    <span>剩余时间: 5天12小时</span>
                </div>
            </div>
            
            <div class="quiz-stats">
                <div class="quiz-stat">
                    <i class="far fa-user"></i>
                    <span>已有 1,542 人参与</span>
                </div>
                <div class="quiz-stat">
                    <i class="far fa-question-circle"></i>
                    <span>2 道题目</span>
                </div>
                <div class="quiz-stat">
                    <i class="fas fa-trophy"></i>
                    <span>正确率 32%</span>
                </div>
            </div>
            
            <div class="quiz-action">
                <button class="join-btn">
                    <i class="fas fa-pencil-alt"></i>
                    <span>提交答案</span>
                </button>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <button class="load-more" id="loadMoreBtn">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多竞答</span>
        </button>
    </div>
    
    <!-- 空状态 -->
    <div class="empty-state" id="emptyState">
        <div class="empty-icon">
            <i class="far fa-folder-open"></i>
        </div>
        <div class="empty-text">没有找到符合条件的竞答</div>
        <button class="empty-btn" id="clearAllFilters">清除筛选条件</button>
    </div>
    
    <!-- 创建竞答按钮 -->
    <button class="fab-create" id="createQuizBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-trophy nav-icon"></i>
            <span>竞答</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const notificationBtn = document.getElementById('notificationBtn');
        const createQuizBtn = document.getElementById('createQuizBtn');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const filterTabs = document.querySelectorAll('.filter-tab');
        const categoryTabs = document.querySelectorAll('.category-tab');
        const joinBtns = document.querySelectorAll('.join-btn');
        const toast = document.getElementById('toast');
        const searchInput = document.querySelector('.search-input');
        const advancedFilterBtn = document.getElementById('advancedFilterBtn');
        const advancedFilterPanel = document.getElementById('advancedFilterPanel');
        const resetFilterBtn = document.getElementById('resetFilterBtn');
        const confirmFilterBtn = document.getElementById('confirmFilterBtn');
        const filterOptions = document.querySelectorAll('.filter-option');
        const filterTags = document.getElementById('filterTags');
        const removeTags = document.querySelectorAll('.remove-tag');
        const clearAllBtn = document.querySelector('.clear-all');
        const quizContainer = document.getElementById('quizContainer');
        const emptyState = document.getElementById('emptyState');
        const clearAllFilters = document.getElementById('clearAllFilters');
        
        // 筛选状态
        let filterState = {
            reward: 'all',
            status: 'all',
            time: 'all',
            contentType: 'all',
            questionCount: 'all',
            participantCount: 'all',
            category: 'all',
            search: ''
        };
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 切换高级筛选面板
        advancedFilterBtn.addEventListener('click', function() {
            advancedFilterPanel.classList.toggle('show');
            this.classList.toggle('active');
        });
        
        // 筛选选项点击
        filterOptions.forEach(option => {
            option.addEventListener('click', function() {
                // 同组选项互斥
                const parent = this.parentElement;
                parent.querySelectorAll('.filter-option').forEach(opt => {
                    opt.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 重置筛选条件
        resetFilterBtn.addEventListener('click', function() {
            filterOptions.forEach(option => {
                option.classList.remove('active');
                if (option.textContent === '全部类型' || 
                    option.textContent === '不限') {
                    option.classList.add('active');
                }
            });
            
            // 重置筛选状态
            filterState.contentType = 'all';
            filterState.questionCount = 'all';
            filterState.participantCount = 'all';
            
            showToast('已重置筛选条件');
        });
        
        // 确认筛选
        confirmFilterBtn.addEventListener('click', function() {
            // 更新筛选状态
            const contentType = document.querySelector('.filter-section:nth-child(1) .filter-option.active').textContent;
            const questionCount = document.querySelector('.filter-section:nth-child(2) .filter-option.active').textContent;
            const participantCount = document.querySelector('.filter-section:nth-child(3) .filter-option.active').textContent;
            
            filterState.contentType = contentType;
            filterState.questionCount = questionCount;
            filterState.participantCount = participantCount;
            
            // 隐藏高级筛选面板
            advancedFilterPanel.classList.remove('show');
            advancedFilterBtn.classList.remove('active');
            
            // 执行筛选
            applyFilters();
            
            // 显示筛选标签
            updateFilterTags();
            
            showToast('筛选条件已应用');
        });
        
        // 筛选标签移除
        removeTags.forEach(tag => {
            tag.addEventListener('click', function() {
                this.parentElement.remove();
                if (filterTags.children.length <= 1) {
                    filterTags.style.display = 'none';
                }
                applyFilters();
                showToast('已移除筛选条件');
            });
        });
        
        // 清除全部筛选
        clearAllBtn.addEventListener('click', function() {
            // 清空筛选标签
            while (filterTags.children.length > 1) {
                filterTags.removeChild(filterTags.firstChild);
            }
            filterTags.style.display = 'none';
            
            // 重置所有筛选状态
            filterState = {
                reward: 'all',
                status: 'all',
                time: 'all',
                contentType: 'all',
                questionCount: 'all',
                participantCount: 'all',
                category: 'all',
                search: ''
            };
            
            // 重置所有选中状态
            filterTabs.forEach(tab => tab.classList.remove('active'));
            document.getElementById('allFilter').classList.add('active');
            
            categoryTabs.forEach(tab => tab.classList.remove('active'));
            categoryTabs[0].classList.add('active');
            
            filterOptions.forEach(option => {
                option.classList.remove('active');
                if (option.textContent === '全部类型' || 
                    option.textContent === '不限') {
                    option.classList.add('active');
                }
            });
            
            searchInput.value = '';
            
            // 应用筛选
            applyFilters();
            showToast('已清除全部筛选条件');
        });
        
        // 清空所有筛选条件（空状态时）
        clearAllFilters.addEventListener('click', function() {
            clearAllBtn.click();
        });
        
        // 更新筛选标签
        function updateFilterTags() {
            // 这里简化处理，实际应用中应根据筛选状态动态生成标签
            filterTags.style.display = 'flex';
        }
        
        // 应用筛选条件
        function applyFilters() {
            const quizCards = document.querySelectorAll('.quiz-card');
            let hasResults = false;
            
            quizCards.forEach(card => {
                // 这里简化处理，实际应用中应根据filterState进行完整筛选
                card.style.display = 'block';
                hasResults = true;
                
                // 示例：根据奖励类型筛选
                if (filterState.reward === 'cash' && !card.dataset.reward === 'cash') {
                    card.style.display = 'none';
                }
                // 其他筛选条件...
            });
            
            // 显示/隐藏空状态
            if (hasResults) {
                quizContainer.style.display = 'block';
                emptyState.classList.remove('show');
            } else {
                quizContainer.style.display = 'none';
                emptyState.classList.add('show');
            }
        }
        
        // 绑定筛选标签点击事件
        filterTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                filterTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 更新筛选状态
                if (this.id === 'allFilter') {
                    filterState.reward = 'all';
                    filterState.status = 'all';
                    filterState.time = 'all';
                } else if (this.id === 'rewardFilter') {
                    // 实际应用中应显示奖励类型选择弹窗
                    showToast('请选择奖励类型');
                } else if (this.id === 'statusFilter') {
                    // 实际应用中应显示状态选择弹窗
                    showToast('请选择竞答状态');
                } else if (this.id === 'timeFilter') {
                    // 实际应用中应显示时间选择弹窗
                    showToast('请选择发布时间');
                }
                
                applyFilters();
                updateFilterTags();
            });
        });
        
        // 分类标签切换
        categoryTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                categoryTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 更新筛选状态
                filterState.category = this.textContent;
                
                applyFilters();
                updateFilterTags();
                showToast(`已切换到 ${this.textContent}`);
            });
        });
        
        // 搜索功能
        searchInput.addEventListener('keyup', function(e) {
            filterState.search = this.value.trim();
            
            if (e.key === 'Enter') {
                applyFilters();
                updateFilterTags();
                showToast(`搜索: ${this.value}`);
            }
        });
        
        // 加载更多
        loadMoreBtn.addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span> 加载中...</span>';
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-plus"></i><span> 加载更多竞答</span>';
                showToast('已加载更多竞答');
            }, 1500);
        });
        
        // 参与竞答按钮
        joinBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const card = this.closest('.quiz-card');
                const title = card.querySelector('.quiz-title').textContent;
                const status = card.querySelector('.quiz-status').textContent;
                
                if (status === '已结束') {
                    showToast('查看竞答详情和答案');
                } else {
                    showToast(`参与竞答：${title.substring(0, 10)}...`);
                }
            });
        });
        
        // 其他按钮事件
        backBtn.addEventListener('click', () => showToast('返回上一页'));
        notificationBtn.addEventListener('click', () => showToast('查看竞答通知'));
        createQuizBtn.addEventListener('click', () => showToast('创建新的有奖竞答'));
        
        // 初始化
        function init() {
            // 初始隐藏筛选标签
            if (filterTags.children.length <= 1) {
                filterTags.style.display = 'none';
            }
        }
        
        init();
    </script>
</body>
</html>
